import React from 'react';
import Router from './router';
import {ThemeProvider, createTheme} from '@mui/material/styles';
import {ThemeModeProvider, ThemeModeContext} from '@theme/ThemeModeContext';

const AppContent = () => {
    const {mode} = React.useContext(ThemeModeContext);
    const theme = React.useMemo(() => createTheme({
        palette: {
            mode,
            ...(mode === 'dark' ? {
                background: {
                    default: '#181818',
                    paper: '#232323',
                },
                text: {
                    primary: '#fff',
                    secondary: '#aaa',
                },
            } : {
                background: {
                    default: '#f5f5f5',
                    paper: '#fff',
                },
                text: {
                    primary: '#222',
                    secondary: '#555',
                },
            })
        }
    }), [mode]);

    return (
        <ThemeProvider theme={theme}>
            <Router />
        </ThemeProvider>
    );
};

const App = () => (
    <ThemeModeProvider>
        <AppContent/>
    </ThemeModeProvider>
);

export default App;
